<script setup>
import * as echarts from 'echarts';
// import '@/vendor/zhejiang.js';
import { onMounted, defineProps, ref } from 'vue'
import zhejiangJSON from '@/utiles/zhejiang.json'
echarts.registerMap('zhejiang', zhejiangJSON) // 注册浙江地图

const props = defineProps({})
const chartRef = ref(null)
let myChart = null
onMounted(() => {
  initMap()
  updateOption()
})
// 初始化地图
const initMap = () => {
  myChart = echarts.init(chartRef.value);
}
const updateOption = () => {
  myChart.setOption({
    backgroundColor: '',//设置无背景色
    visualMap: {
      show: false,
      min: 0,
      max: 100,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'], // 文本，默认为数值文本
      calculable: true,
      // inRange: {
      //     color: ['yellow', 'lightskyblue', 'orangered']
      // }
    },
    grid: {

      // right: '2%',//生成的图片和右边的间距’,
      // bottom: '10%',//生成的图片和底部的间距
      top: '-0.33rem',//生成的图片和顶部的间距
      containLabel: true//为ture才会生效以上的设置
    },
    series: [{
      type: 'map',
      mapType: 'zhejiang',
      roam: true,
      label: {
        normal: {
          show: true,
          textStyle: {
            color: '#fff'
          }
        },
        emphasis: {
          textStyle: {
            color: '#fff'
          }
        }
      },
      itemStyle: {
        normal: {
          borderColor: '#389BB7',
          areaColor: '#fff',
        },
        emphasis: {
          areaColor: '#389BB7',
          borderWidth: 0
        }
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(147, 235, 248, 1)',
          borderWidth: 1,

          areaColor: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [{
              offset: 0,
              color: 'rgba(175,238,238, 0)' // 0% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(47,79,79, .1)' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          },
          shadowColor: 'rgba(128, 217, 248, 1)',
          // shadowColor: 'rgba(255, 255, 255, 1)',
          shadowOffsetX: -2,
          shadowOffsetY: 2,
          shadowBlur: 10
        },
        emphasis: {
          areaColor: '#389BB7',
          borderWidth: 0
        }
      },
      animation: false,
      data: [{
        name: '丽水',

      }, {
        name: '杭州',

      }, {
        name: '温州',

      }, {
        name: '宁波',

      }, {
        name: '舟山',
        // value: 88  去掉则透明
      }, {
        name: '台州',

      }, {
        name: '金华',

      }, {
        name: '衢州',

      }, {
        name: '绍兴',

      }, {
        name: '嘉兴',

      }, {
        name: '湖州',

      }]
    }]
  });
}
window.addEventListener("resize", () => {
  myChart.resize();
});
</script>
<template>
  <div ref="chartRef" class="map-chart"></div>
</template>

<style scoped>
.map-chart {
  width: 100%;
  height: 8.35rem;
}
</style>